<template>
	<!-- 导航栏 -->
	<view>
		<view class="fixed-top" :style="navBarStyle">
			<!-- 状态栏 -->
			<view :style="'height:' + statusBarHeight + 'px'"></view>
			<!-- 导航 -->
			<view class=" w-100 flex align-center justify-between" style="height: 90rpx;">
				<!-- 左边 -->
				<view class="flex align-center">
					<!-- 返回按钮 -->
					<view hover-class="bg-hover-light" @click="back" class="flex align-center justify-center" style="height: 90rpx;width: 90rpx;">
						<text :style="buttonStyle"  class="iconfont font-md">{{'\ue60d'}}</text>
					</view>
					<!-- <free-icon-button @click="back" :icon="'\ue60d'"></free-icon-button> -->
					<!-- 标题 -->
					<text v-if="title" class="font-md ml-3">
						<!-- <slot name="title"></slot> -->
						{{ title }}
					</text>
				</view>
				<!-- 右边 -->
				<view class="flex align-center">
					<slot name="right">
						<view @click="$emit('clickRight')" hover-class="bg-hover-light"  class="flex align-center justify-center" style="height: 90rpx;width: 90rpx;">
							<text :style="buttonStyle" class="iconfont font-md">{{'\ue6e3'}}</text>
						</view>
						<free-icon-b<!-- utton :icon="'\ue6e3'"></free-icon-button> -->
					</slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeIconButton from '@/components/free-ui/free-icon-button.vue';
	export default {
		props: {
			title: {
				type: [String, Boolean],
				default: false
			},
			scrollTop: {
				type: [Number, String],
				default: 0
			}
		},
		components: {
			freeIconButton
		},
		data() {
			return {
				statusBarHeight: 0, //状态栏
				navBarHeight: 0 //导航栏高度
			};
		},
		mounted() {
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight();
			console.log('this.statusBarHeight', this.statusBarHeight);
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90);
		},
		computed: {
			changeNumber() {
				let start = uni.upx2px(500);
				let end = uni.upx2px(620)
				let H = end - start
				let num = 0;
				if (this.scrollTop > start) {
					num = (this.scrollTop - start) / H;
				}
				return num > 1 ? 1 : num;
				return
			},
			navBarStyle() {
				return `background-color: rgba(255,255,255,${this.changeNumber});`
			},
			buttonStyle() {
				if (this.changeNumber > 0) {
					return `color:rgba(0,0,0,${this.changeNumber});`
				}
				return `color:#fff;`
			},
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
		// onLoad() {
		// 	// #ifdef APP-PLUS-NVUE
		// 	this.statusBarHeight = plus.navigator.getStatusbarHeight();
		// 	// console.log('this.statusBarHeight', this.statusBarHeight);
		// 	// #endif
		// }
	};
</script>

<style>
	@import '@/common/free.css';
	@import '@/common/common.css';
	/* #ifndef APP-PLUS-NVUE */
	@import '@/common/free-icon.css';
	/* #endif*/
</style>
